 <template>
  <div class="menu">
    <toggle-show
      @search="getList"
      @deleteMore="deleteMore"
      :selectedRowKeys="selectedRowKeys"
    ></toggle-show>
    <a-table
      :columns="columns"
      :data-source="data"
      :row-selection="{ onChange: onChange, selectedRowKeys: selectedRowKeys }"
    >
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="role" slot-scope="text">
        <a-tag v-for="role in text" :key="role" color="green">{{ role }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-icon type="edit" style="color: #1890ff" />
        <a style="font-size: 14px" @click="handleUpdate(record)">修改</a>
        <a-divider type="vertical"></a-divider>
        <a-icon type="delete" style="color: #1890ff" />
        <a-popconfirm
          title="确定删除?"
          ok-text="是"
          cancel-text="否"
          @confirm="confirm(record)"
        >
          <a style="font-size: 14px">删除</a>
        </a-popconfirm>
      </span>
    </a-table>

    <add-dialog @success="getList"></add-dialog>
    <update-dialog @success="getList"></update-dialog>
  </div>
</template>

<script>
import { queryUserList, deleteUser } from "@/api/system/user";
import { queryRoleList } from "@/api/system/role";
import ToggleShow from "./ToggleShow";
import AddDialog from "./AddDialog";
import UpdateDialog from "./UpdateDialog";

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 100,
    scopedSlots: { customRender: "index" },
  },
  {
    title: "用户名",
    dataIndex: "username",
    align: "center",
  },
  {
    title: "用户角色",
    dataIndex: "role",
    align: "center",
    scopedSlots: { customRender: "role" },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: 220,
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "User",
  components: {
    AddDialog,
    UpdateDialog,
    ToggleShow,
  },
  data() {
    return {
      columns: columns,
      data: [],
      roleList: [],
      selectedRows: [],
      selectedRowKeys: []
    };
  },
  methods: {
    async getList(params = {}) {
      queryUserList(params).then(({ data }) => {
        this.data = data;
        for (let i = 0; i < data.length; i++) {
          let roles = data[i].role;
          this.data[i].role = roles.map((r) => {
            let index = this.roleList.findIndex((role) => role.value === r);
            return this.roleList[index].name;
          });
        }
      });
    },
    async getRoleList() {
      queryRoleList().then(({ data }) => {
        this.roleList = data;
      });
    },
    onChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows;
    },
    deleteMore() {
      let _this = this;
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        content: '确定删除？',
        onOk() {
          let ids = _this.selectedRows.map(i => i._id);
          deleteUser({ _id: ids.join(',') }).then((res) => {
            if (res.data.success) {
              _this.$message.success("删除成功！");
              _this.selectedRowKeys = [];
              _this.getList();
            } else {
              _this.$message.error("删除失败！");
            }
          });
        },
        onCancel() {
          _this.destroyAll();
        }
      })
    },
    confirm(record) {
      deleteUser({ _id: record._id }).then((res) => {
        if (res.data.success) {
          this.$message.success("删除成功！");
          this.selectedRowKeys = [];
          this.getList();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    handleUpdate(record) {
      if (record.role.includes("超级管理员")) {
        this.$message.warning("超级管理员账户不可更改！");
        return false;
      }
      this.$store.dispatch("SetUpdateVisible", [true, "user", record._id]);
    },
  },
  async created() {
    await this.getRoleList();
    await this.getList();
  },
};
</script>

<style lang="scss">
</style>